<template>
  <div>
    <div @click="handleShow">
      <CommonInput
        :label="label"
        v-model="currentValue"
        :placeholder="placeholder"
        :required="required"
        disabled
        :width="width"
      />
    </div>
    <timePicker
      :pickerShow="isPickerShow"
      id="picker"
      v-if="isPickerRender"
      @hidePicker="handlePickerHide"
      @setPickerTime="handleSetPickerTime"
      :config="pickerConfig"/>
  </div>
</template>

<script>
import CommonInput from './CommonInput'

export default {
  components: {
    CommonInput,
  },
  props: {
    value: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
    },
    placeholder: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      isPickerShow: false,
      isPickerRender: false,
      pickerConfig: {
        column: 'minute',
        dateLimit: false,
      },
      currentValue: null,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        if (this.value) {
          this.currentValue = this.value
        }
      },
    },
  },
  methods: {
    handleShow () {
      this.isPickerShow = true
      this.isPickerRender = true
    },
    handlePickerHide () {
      this.isPickerShow = false
      this.isPickerRender = false
    },
    handleSetPickerTime (value) {
      console.log('handleSetPickerTime')
      this.$emit('input', value.detail.startTime.substring(0, 16))
    },
  },
}
</script>
